import React, { useState, useEffect } from 'react';
import './index.scss';
import { useTranslation } from 'react-i18next';
import { Menu, Select } from 'antd';
import { useNavigate } from 'react-router-dom';

function getItem(label, key, icon, items, type) {
    return {
        key,
        icon,
        items,
        label,
        type
    };
}

const DrawerContent = () => {
    const { t, i18n } = useTranslation();
    const navigate = useNavigate();
    const [language, setLanguage] = useState(localStorage.getItem('language') || 'zh');
    const lngs = [
        { nativeName: 'English', short: 'en' },
        { nativeName: '中文', short: 'zh' }
    ];

    const items = [
        getItem(t('homeText'), 'sub1'),
        getItem(t('FollowCase'), 'sub2'),
        getItem('NFT', 'sub3'),
        getItem('DAO', 'sub4'),
        getItem(t('Consult'), 'sub8'),
        getItem('FQ', 'sub5'),
        getItem(
            <Select
                style={{ width: '70px' }}
                popupMatchSelectWidth={false}
                value={language}
                onChange={(value) => {
                    localStorage.setItem('language', value);
                    i18n.changeLanguage(value);
                    setLanguage(value);
                }}>
                {lngs.map((item, index) => (
                    <Select.Option key={item.short} value={item.short}>
                        {item.nativeName}
                    </Select.Option>
                ))}
            </Select>,
            'sub6'
        ),
        getItem(t('Dashboard'), 'sub7')
    ];

    const rootSubmenuKeys = ['sub1', 'sub2', 'sub3', 'sub4', 'sub5', 'sub6', 'sub7', 'sub8'];
    const [openKeys, setOpenKeys] = useState(['sub1']);

    const onOpenChange = (keys) => {
        console.log(keys)
        const latestOpenKey = keys.find((key) => openKeys.indexOf(key) === -1);

        if (latestOpenKey && rootSubmenuKeys.indexOf(latestOpenKey) === -1) {
            setOpenKeys(keys);
        } else {
            setOpenKeys(latestOpenKey ? [latestOpenKey] : []);
        }
    };
    useEffect(() => {
        const storedLanguage = localStorage.getItem('language');
        setLanguage(storedLanguage);
        i18n.changeLanguage(storedLanguage);
    }, [i18n]);

    const onClick = (e) => {
        switch (e.key) {
            case 'sub7':
                const token = localStorage.getItem('token')
                token ? navigate('/dashboardPC/home') : navigate('/login') ;
                break;
                case 'signup':
                 navigate('/login')
                    break;
                
        }
    };

    return (
        <Menu
            mode="inline"
            openKeys={openKeys}
            defaultSelectedKeys={['sub1']}
            onOpenChange={onOpenChange}
            onClick={onClick}
            style={{ width: '100%' }}>
            {items.map((item) => (
                <Menu.Item key={item.key}>{item.label}</Menu.Item>
            ))}
            <Menu.Item key='signup' className='ant-menu-item-active'>注册登录</Menu.Item>
        </Menu>
    );
};

export default DrawerContent;
